<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
	table, th, td
  {
  border-collapse:collapse;
  border: 1px solid blue;
  }
</style>
</head>
<body>
	<p>名字：</p><input type="text" id="name"></br>

	<p>性别：</p><select id="sex">
	<option value="false">男</option>
	<option value="true">女</option>
	</select></br>
	
	<p>年龄：</p><input type="text" id="age"></br>
	<p>工资：</p><input type="text" id="sal"></br>
	
	<p>日期：</p><input type="date" id="birth"></br>
	<button class="addbtn">add</button></br>
	<table id="usertable">
	
	</table>
	
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              </div>
              <div class="modal-body">
                  <div class="form-horizontal">
                      <div class="control-group">
                          <label class="control-label" for="uduid">id</label>
                          <div class="controls">
                              <input type="text" id="uduid" name="id" disabled="disabled">
                          </div>
                      </div>
                      <div class="control-group">
                          <label class="control-label" for="uduname">name</label>
                          <div class="controls">
                              <input type="text" id="uduname" name="name">
                          </div>
                      </div>
                      <div class="control-group">
                          <label class="control-label" for="udusal">salary</label>
                          <div class="controls">
                              <input type="text" id="udusal" name="sal">
                          </div>
                      </div>
                      <div class="control-group">
                          <label class="control-label" for="usex">sex</label>
                          <div class="controls">
                              <select id="udusex">
								<option value="false">男</option>
								<option value="true">女</option>
							</select>
                          </div>
                      </div>
                      <div class="control-group">
                          <label class="control-label" for="uage">age</label>
                          <div class="controls">
                              <input type="text" id="uduage" name="age">
                          </div>
                      </div>
                      <div class="control-group">
                          <label class="control-label" for="ubirth">birth</label>
                          <div class="controls">
                              <input type="date" id="udubirth" name="birth">
                          </div>
                      </div>
                      <div class="control-group">
                          <div class="controls">
                              <button class="btn" id="udaddbtn">Update</button>
                          </div>
                      </div>
                  </div>
                </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="pushReason">PUSH</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
	
	<script type="text/javascript">
	$(function(){
		$("button.addbtn").on("click",function(){
			var user={name:$("#name").val(),age:$("#age").val(),sex:$("#sex").val(),sal:$("#sal").val(),birth:$("#birth").val()};
			addusers(user);
			
			
		})
		
		function addusers(user){
			$.ajax({
			type:"POST",
			url:"http://localhost:8088/homework_0807_V2/addUser",
			data:JSON.stringify(user),
			contentType:"application/json",	
			}).done(function(msg){
				if(msg){
					getusers();
				}
			});
		}
		
		function getusers(){
			$.ajax({
			type:"POST",
			url:"http://localhost:8088/homework_0807_V2/getUser",	
			}).done(function(users){
				tableOperator(users);
                $("button.delete").click(function(){
                    var id=$(this).attr("id");
                    deleteuser(id);
                });
                $("button.update").click(function(){                	
                    alert(($(this).parent().find("td").eq(0).text()));
                    $("#myModal").modal("show");
                    $("#uduid").val($(this).parent().find("td").eq(0).text());
                    $("#uduname").val($(this).parent().find("td").eq(2).text());
                    $("#udusal").val($(this).parent().find("td").eq(4).text());
                    $("#udusex").val($(this).parent().find("td").eq(1).text());
                    $("#uduage").val($(this).parent().find("td").eq(3).text());
                    $("#udubirth").val($(this).parent().find("td").eq(5).text());
                   
                    
                    $("#udaddbtn").on("click",function(){
                    	var user={id:$("#uduid").val(),name:$("#uduname").val(),age:$("#uduage").val(),sex:$("#udusex").val(),sal:$("#udusal").val(),birth:$("#udubirth").val()};
                    	updateuser(user);
                    	getusers();
                    })
                    
                    
                    
                });
			})
		
		}
		function tableOperator(users){
            $($("#usertable").children()).each(function(){
                    $(this).remove();
                });
			$("<th>ID</th>").appendTo($("#usertable"));
			$("<th>性别</th>").appendTo($("#usertable"));
			$("<th>名字</th>").appendTo($("#usertable"));
			$("<th>年龄</th>").appendTo($("#usertable"));
			$("<th>工资</th>").appendTo($("#usertable"));
			$("<th>日期</th>").appendTo($("#usertable"));
			$("<th>操作</th>").appendTo($("#usertable"));
			
            $(users).each(function(index, obj){
                $("<tr></tr>").appendTo($("#usertable"));
                $("<td>"+obj.id+"</td>").appendTo($("#usertable"));
                if(obj.sex==true){
                    $("<td>"+"女"+"</td>").appendTo($("#usertable"));
                };
                if(obj.sex==false){
                    $("<td>"+"男"+"</td>").appendTo($("#usertable"));
                };
                $("<td>"+obj.name+"</td>").appendTo($("#usertable"));
                $("<td>"+obj.age+"</td>").appendTo($("#usertable"));
                $("<td>"+obj.sal+"</td>").appendTo($("#usertable"));
                $("<td>"+obj.birth+"</td>").appendTo($("#usertable"));
                $("<button>删除</button>").attr("class","delete").attr("id",obj.id).appendTo($("#usertable"));
                $("<button>更新</button>").attr("class","update").attr("id",obj.id).appendTo($("#usertable"));
                
            })		
		}
        
        function deleteuser(id){
              $.ajax({
                type:"GET",
                url:"http://localhost:8088/homework_0807_V2/deletUser?id="+id,
            })
            .done(function(msg){
            	if(msg){
            		getusers();
            	}
            	
            });
            
        }
        
        function updateuser(user){
        	$.ajax({
    			type:"POST",
    			url:"http://localhost:8088/homework_0807_V2/updateUser",
    			data:JSON.stringify(user),
    			contentType:"application/json",	
    			}).done(function(msg){
    				if(msg){
    					$("#uduid").val("");
    					 $("#myModal").modal("hide");	 
        				 	
    				}   				
    			});
        }
	
	})
	
	</script>
	

</body>
</html>